<ng-container [ngSwitch]="name$ | async">
  <app-app-title *ngSwitchCase="'category'" [useRouterQuery]="true">
    <ng-container>{{ title }}</ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'ranking'" [useRouterQuery]="true" [top]="(result$ | async)?.length">
    <ng-container><span i18n>Rankings</span></ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'keyword'" [useRouterQuery]="true">
    <ng-container i18n
      >Search results for <span class="keyword">{{ title }}</span></ng-container
    >
  </app-app-title>
  <app-app-title *ngSwitchCase="'author'" [useRouterQuery]="true">
    <ng-container *ngIf="title as name" i18n>Apps developed by {{ name }}</ng-container>
  </app-app-title>
  <app-app-title *ngSwitchCase="'packager'" [useRouterQuery]="true">
    <ng-container *ngIf="title as name" i18n>Apps packaged by {{ name }}</ng-container>
  </app-app-title>
</ng-container>
<ng-container *ngIf="result$ | async as result; else loadRef">
  <dstore-list
    *ngIf="result.length > 0; else emptyRef"
    [list]="result"
    [lazyload]="true"
    (load)="load()"
    [slogan]="slogan"
  ></dstore-list>
</ng-container>
<ng-template #loadRef>
  <div class="loading-container">
    <app-wait></app-wait>
  </div>
</ng-template>

<ng-template #emptyRef>
  <div class="searchEmpty" *ngIf="(name$ | async) === 'keyword'">
    <img class="tips_bg" /> <span i18n>Sorry</span>
    <div class="gray-text" i18n>No search results found</div>

    <div class="gray-text">
      <ng-container i18n
        >Welcome to <a class="recommend" (click)="recommend()">recommend</a> this application</ng-container
      >
    </div>
  </div>
</ng-template>
